<script setup name="header">
import { ref } from 'vue'
import { IconMenuFold, IconMenuUnfold } from '@arco-design/web-vue/es/icon'
import { useMenuStore } from '../store/index'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { encrypt } from '@/util/rsa-util'
import { updatePassword } from '@/api/user'
import { Message } from '@arco-design/web-vue'

const router = useRouter()
const visibleImage = ref(false)
const username = ref('admin')
const handleSelect = () => {}
const menuStore = useMenuStore()
const { collapse } = storeToRefs(menuStore)
const updatePwdForm = ref({})
const updatePwdVisible = ref(false)

const changeMenuFoldStatus = () => {
  menuStore.setCollapse(!collapse.value)
}
const logout = () => {
  localStorage.clear()
  sessionStorage.clear()
  router.push('/login')
}
const submitUpdatePwd = async () => {
  if (updatePwdForm.value.newPassword !== updatePwdForm.value.reNewPassword) {
    Message.error('新密码两次密码不相同')
    return false
  }
  await updatePassword({
    password: encrypt(updatePwdForm.value.password),
    newPassword: encrypt(updatePwdForm.value.newPassword)
  }).then((_) => {
    Message.success('密码修改成功！')
    closeUpdatePwdModal()
  })
}
const cancelUpdatePwd = () => {
  closeUpdatePwdModal()
}
const closeUpdatePwdModal = () => {
  updatePwdForm.value = {}
  updatePwdVisible.value = false
}
</script>

<template>
  <div class="header">
    <div class="menu-fold-icon" @click="changeMenuFoldStatus">
      <icon-menu-fold v-if="!collapse" />
      <icon-menu-unfold v-else />
    </div>
    <a-dropdown @select="handleSelect">
      <div class="user" style="cursor: pointer">
        <a-image
          class="image"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
          :preview-visible="visibleImage"
        >
        </a-image>
        <div class="username">{{ username }}</div>
      </div>
      <template #content>
        <a-doption @click="updatePwdVisible = true">修改密码</a-doption>
        <a-doption @click="logout"> 退出 </a-doption>
      </template>
    </a-dropdown>
    <a-modal
      v-model:visible="updatePwdVisible"
      :on-before-ok="submitUpdatePwd"
      @cancel="cancelUpdatePwd"
    >
      <template #title> 修改密码 </template>
      <div>
        <a-form :model="updatePwdForm">
          <a-form-item
            field="password"
            label="原密码"
            validate-trigger="input"
            required
          >
            <a-input
              v-model="updatePwdForm.password"
              placeholder="请输入原密码"
              type="password"
            />
          </a-form-item>
          <a-form-item
            field="newPassword"
            label="新密码"
            validate-trigger="input"
            required
          >
            <a-input
              v-model="updatePwdForm.newPassword"
              placeholder="请输入新密码"
              type="password"
            />
          </a-form-item>
          <a-form-item
            field="reNewPassword"
            label="确认密码"
            validate-trigger="input"
            required
          >
            <a-input
              v-model="updatePwdForm.reNewPassword"
              placeholder="请确认新密码"
              type="password"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
.header {
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(229, 230, 235);
  .menu-fold-icon {
    display: flex;
    font-size: 25px;
    color: rgb(107, 107, 107);
    cursor: pointer;
    margin-left: 20px;
  }
  .user {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 30px;
    .image {
      display: flex;
      border-radius: 35px;
      height: 35px;
      width: 35px;
    }
    .username {
      display: flex;
      margin-left: 10px;
    }
  }
}
</style>
